最近有同学问了老师这样一个问题，就是关于BS架构与CS架构，对设计会有什么影响
在我工作的五六年时间里，其实很少会用到这方面的内容，并且我们之前团队也做过客户端与网页端，很少去分析这两者之间的差异，我觉得特别有意思，今天我们就来聊聊关于BS架构与CS架构之间有什么差异？
定义
肯定会有同学不知道这两个名词具体的含义，简单说说
首先BS架构，（定义不够准确）即浏览器和服务器架构模式，是随着Internet技术的兴起，对C/S架构的一种变化或者改进的架构。这种架构下，用户工作界面通过浏览器即可实现，极少部分事物逻辑在前端（Brower）实现。B/S架构是WEB兴起的一种网络架构模式，WEB浏览器是客户端最主要的应用软件
通俗一点来说，其实就是我们理解的客户端，比如常见的 Windows 系统当中的exe，Macos系统当中的pkg，都是软件的 BS 架构的产品
其次CS架构，（定义不够准确）则是通过采取两层结构，服务器负责数据的管理，客户机负责完成与用户的交互任务。客户机通过局域网与服务器相连，接受用户的请求，并通过网络向服务器提出请求，对数据库进行操作
通俗一点来说，就是网页端的产品，比如B端系统当中的 各种用浏览器打开的产品，都可以这么进行归纳（设计已经很难了，就不要太纠结了）如果你是从C端设计师，给你举一个更为形象的例子，BS架构就如同我们设计的原生应用，就是你在 app store 里面下载的
而CS架构的就是 小程序 h5 他们都是根据运行在其他产品当中的，这其实就是他们的差别
BS架构与CS架构对B端产品有何影响
其实这两年接触到B端设计的同学，很多就会默认我的产品是运行在浏览器当中，但是在B端早期，很多产品都是以客户端的形式出现，比如像金蝶k3，用友u8都是通过客户端，以激活码的形式进行使用
当然随着 SaaS的普及，为了降低用户的使用成本，按照每月收费的标注，再加上 浏览器当中的技术逐渐成熟，现如今很多产品都是采取 BS 架构，金蝶、用友也是如此，只是在财税等敏感内容时，使用本地客户端的形式BS架构与CS架构对设计带来的影响
BS架构与CS架构其实对于开发而言差距非常大，因为会涉及到完全不同的技术类型，开发理念也完全不同，因此差别巨大。但是在设计的角度，主要总结了以下几类差别浏览器的缩放比例、与客户端的分辨率缩放
在页面设计当中，缩放是最为头疼的
在BS架构的浏览器当中，浏览器的缩放将会直接影响页面的呈现，因为浏览器本身的放大缩小是直接破坏性的将页面强制进行调整。因此在BS架构当中，我们通常会在页面当中进行通知，目前页面处于缩放状态，需要回到100%的页面分辨率当中
上面主要呈现是 公众号 壹伴 的浏览器变化以及 有赞 缩放的信息提示而在CS架构的产品当中，能够通过拖拽四角，实现客户端的窗口大小调整。虽然 客户端也会有几个缩放等级（你可以打开微信桌面端，按下 Command+加号）但是整体的缩放方式是其本身就已经做好预设，不会出现浏览器当中特别离谱的情况并且客户端整体的最小尺寸是较为固定，如果想要比这个尺寸还小，那系统便可以 “摆烂” 不做加载快捷键
由于在浏览器当中，快捷键的使用其实会受到浏览器的限制，为了避免冲突，在设计的时候要尽可能的避免
而在CS架构的产品当中，原生的客户端则不会有太多的限制，避免与系统的那个汇总常使用的快捷冲突即可。并且优先级都是 系统全局快捷键（如Command+Q）> CS架构产品快捷键 > BS架构产品快捷键新出窗口的设计
我相信大多数B端设计师都有见过这样的这类的页签设计，并且对其深恶痛绝。而这类型的设计，其实最开始就是从CS架构的产品当中引出的。我们在设计CS架构的产品的时候，就一定要注意会不会有新窗口的情况，新窗口究竟应该如何弹出如果有需求，其实大概率就是在系统当中做一个浏览器页签产品资源的加载方式
因为CS架构与BS架构，本身产品的特性就会有所不同，一个是需要安装，另一个即开即用，因此在资源加载上就会有所差别CS架构很多可以通过本地文件获取得到，比如图标、界面资源，我们都可以通过CS架构当中的客户端进行使用而在BS架构当中，所有资源都需要进行网络加载（有些内容可以通过缓存保留）因此对于网络的实际要求会更高。总结
其实关于BS架构与CS架构，现在来看其实差别真的不大，因为现在有很多产品边界并不清晰，比如 Notion、Figma 既会有网页端、也会有客户端，并且能够发现整体架构都是同一套逻辑也尝试去搜索了一下，现在有很多成熟的封装技术能够达到这样的一个效果，很多技术层面的我们就不班门弄斧了，关于技术层面的东西不必过于纠结，专注于自己的领域，做好设计
如果想要了解更多关于B端设计相关内容的的同学，快来参加我们的B端交互训练营吧！扫码右侧二维码，备注：课程